//公共
const path =require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');

// 生成的雪碧图CSS文件模板自定义，也可以不配置直接使用默认的模板
const templateFunction = function (data) {

    // PC端配置
    const shared = '.ico { diaplay: inline-block; background-image: url(I); background-size: Dpx Hpx; }'
        .replace('I', data.sprites[0].image)
        .replace('D', data.sprites[0].total_width)
        .replace('H', data.sprites[0].total_height);

    var perSprite = data.sprites.map(function (sprite) {
        return '.ico-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
            .replace('N', sprite.name.replace(/_/g, '-'))
            .replace('W', sprite.width)
            .replace('H', sprite.height)
            .replace('X', sprite.offset_x)
            .replace('Y', sprite.offset_y);
    }).join('\n');

    // 移动端配置
    const sharedRem = '.ico { diaplay: inline-block; background-image: url(I); background-size: Drem Hrem; }'
        .replace('I', data.sprites[0].image)
        .replace('D', data.sprites[0].total_width / 100)
        .replace('H', data.sprites[0].total_height / 100);

    const perSpriteRem = data.sprites.map(function (sprite) {
        return '.ico-N { width: Wrem; height: Hrem; background-position: X Yrem; }'
            .replace('N', sprite.name.replace(/_/g, '-'))
            .replace('W', sprite.width / 100)
            .replace('H', sprite.height / 100)
            .replace('X', sprite.offset_x / 100)
            .replace('Y', sprite.offset_y / 100);
    }).join('\n');

    return shared + '\n' + perSprite + '\n\n' + sharedRem + '\n' + perSpriteRem;
};





module.exports={
    entry:{
            main:path.join(__dirname,'../src/main.js'),
            two:path.join(__dirname,'../src/two.js'),
        },
    output: {
        //将所有的依赖模块输入到bundle.js
        filename: "[name].js",
        //将输出文件放到dist文件夹下
        path: path.join(__dirname,'..','dist')
    },
    module: {
        rules: [
            {
                //用正则表达式去匹配要用该Loader转换的css文件
                test: /\.css$/,
                use:[{
                    loader: MiniCssExtractPlugin.loader,
                },'css-loader','postcss-loader'],
            },
            {
                //处理scss文件
                test: /\.(scss|sass)$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                },'css-loader','postcss-loader','sass-loader'],
            },
            {
                test: /\.js$/,
                include: path.resolve("../src"),
                use: [
                    "thread-loader",
                    "expensive-loader",
                    'babel-loader'
                ],
                exclude: /node_modules/   // 排除匹配node_modules模块
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader',
            },
            {
                test: /\.(png|jpg|svg|gif)$/,  // 正则匹配图片格式名
                use: [
                    {
                        loader: 'file-loader',  // 使用file-loader
                        options: {
                            outputPath: 'images',  // 设置打包后图片存放的文件夹名称
                            name:'[name].[hash:5].[ext]',
                            esModule:false,
                            publicPath:"./images"
                        }
                    },
                ]
            },
            {
                test: /\.(png|jpe?g|jpg|svg|gif)$/,  // 正则匹配图片格式名
                use: [
                    {
                        loader: 'file-loader',  // 使用file-loader
                        options: {
                            outputPath: 'images',  // 设置打包后图片存放的文件夹名称
                            esModule:false,
                            name: '[name]-[hash].[ext]',
                            publicPath:'./images'
                        }
                    },'image-webpack-loader'
                ]
            },
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title:"Wbpack App",
            template: "index.html"// new一个这个插件的实例，并传入相关的参数

        }),
        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, '../src/images'),            // 图标根路径
                glob: '*.png'                                               // 图标类型
            },
            target: {
                image: path.resolve(__dirname, '../dist/images/sprite.png'),   // 生成雪碧图的名称和路径
                css: [
                    [path.resolve(__dirname, '../dist/css/sprite.css'), {      // 生成CSS文件的名称和路径
                        format: 'function_based_template'                   // 模板配置，注意在customTemplates中配置对应名称的属性名
                    }],
                    [path.resolve(__dirname, '../dist/css/sprite.json'), {     // 生成json文件的名称和路径，想看图片数据的可以配置该项
                        format: 'json_texture'
                    }]
                ]
            },
            customTemplates: {
                'function_based_template': templateFunction                 // 上一项使用到的模板变量
            },
            apiOptions: {
                cssImageRef: '../images/sprite.png'                         // 生成的CSS中引用的雪碧图路径
            },
            spritesmithOptions: {
                algorithm: 'top-down',                                      // 生成的雪碧图图标排列方式
                padding: 1                                                  // 图标的间隔
            }
        }),

        ]
}
